<template>
  <div>
    <div class="bigBox">
      <div class="app-container pd">
        <div class="filter-container">
          <el-input v-model="character.username" placeholder="用户名称" class="filter-item search-item" />
          <el-button class="filter-item" type="primary" @click="search">搜 索</el-button>
          <el-button class="filter-item mr" type="info" @click="reset">重 置</el-button>
          <el-dropdown trigger="click" class="filter-item">
            <el-button>
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="edit('add')">新 增</el-dropdown-item>
              <el-dropdown-item @click.native="resDeletes">批量删除</el-dropdown-item>
              <el-dropdown-item @click.native="resetPassword">重置密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="pageData"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="username"
          align="center"
          width="250"
          show-overflow-tooltip
          label="账号"
        />
        <el-table-column
          prop="role"
          align="center"
          label="角色"
        >
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.role.split(',')" :key="item" class="mr" type="success">{{ listObj[item] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
        />
        <el-table-column
          prop="password"
          width="250"
          align="center"
          label="密码"
        >
          <template>
            <span>******</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <a style="color: #409eff" @click="edit(scope.row)">编辑</a>
            <el-divider direction="vertical" />
            <a style="color: orangered" @click="resDelete(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="pageSearch"
      />
      <Edit
        ref="resourceDate"
        :dialog-visible="open"
        :list="list"
        @close="close"
      />
    </div>
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import Edit from './edit'
import { getUserRole } from '@/utils/auto'
export default {
  name: 'Admin',
  components: { pagination, Edit },
  data() {
    return {
      open: false,
      list: [],
      listObj: {},
      loading: false,
      character: {},
      pageData: null,
      selection: [],
      total: 0,
      pagination: {
        size: 10,
        num: 1
      }
    }
  },
  mounted() {
    this.initRole()
    this.feach()
  },
  methods: {
    pageSearch() {
      this.feach({
        ...this.character
      })
    },
    // 搜索
    search() {
      this.pagination.num = 1
      this.pagination.size = 10
      this.feach({
        ...this.character
      })
    },
    reset() {
      this.character = {}
      this.feach()
    },
    initRole() {
      getUserRole().then(res => {
        const { list, obj } = res
        this.list = list
        this.listObj = obj
      })
    },
    // 渲染
    feach(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.loading = true
      this.$get('/user/list', {
        ...params
      }).then(r => {
        console.log(r)
        const data = r.data.data
        this.total = data.total
        this.pageData = data.rows
        this.loading = false
      })
    },
    handleSelectionChange(selection) {
      this.selection = selection
    },
    edit(row) {
      this.open = true
      if (row !== 'add') {
        this.$refs.resourceDate.resourceFunction(row)
      }
    },
    close() {
      this.open = false
      this.feach()
    },
    delets(item) {
      const arr = []
      item.forEach(t => {
        arr.push(t._id)
      })
      const newArr = arr.join(',')
      this.$delete(`/user/delet`, { ids: newArr }).then(res => {
        if (res.status === 200) {
          this.$message.success(res.data.message)
          this.feach()
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    // 删除勾选
    resDeletes() {
      if (this.selection.length > 0) {
        this.delets(this.selection)
      } else {
        this.$message.warning('请选择需要删除的资源')
      }
    },
    resetPassword() {
      if (this.selection.length > 0) {
        const arr = []
        this.selection.forEach(t => {
          arr.push(t._id)
        })
        const newArr = arr.join(',')
        this.$post('/user/resetPassword', { ids: newArr }).then(res => {
          if (res.status === 200) {
            this.$message.success(res.data.message)
            this.feach()
          } else {
            this.$message.warning(res.data.message)
          }
        })
      } else {
        this.$message.warning('请选择需要删除的资源')
      }
    },
    // 删除行
    resDelete(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$delete(`/user/delet`, { ids: row._id }).then(res => {
          if (res.status === 200) {
            this.$message.success(res.data.message)
            this.feach()
          } else {
            this.$message.warning(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
